<template>
  <div class="dashboard-container">
    <div class="flex-card">
      <el-card>
        <div
          slot="header"
          class="cardheader"
        >
          <div class="usedButton">
            <div>常用功能</div>
            <div class="settingButton">
              <i
                class="el-icon-s-tools"
                @click="visible=true"
              ></i>
            </div>
          </div>
        </div>
        <CommonFunctions v-if="visible==false" />
      </el-card>
      <el-card>
        <el-tabs
          v-model="activeName"
          @tab-click="handleClick"
        >
          <template v-for="(item,index) in agentCloum">

            <el-tab-pane
              :key="index"
              :name="item.key"
              class="agenttabPaneClass"
            >
              <span slot="label">{{item.name}}
                <el-badge
                  v-if="agentData.length>0&&item.key=='first'"
                  :value="agentData.length"
                >
                </el-badge>
              </span>
              <ul class="agentClass">
                <li
                  v-for="(item2,index) in agentDataList"
                  :key="index"
                >
                  {{item2.remark}}
                </li>
              </ul>
            </el-tab-pane>
          </template>
        </el-tabs>
      </el-card>
    </div>
    <div class="flex-card">
      <el-card>
        <StatisticsToday :financialData="financialData" />
      </el-card>
      <el-card>
        <ProductionValueTable :list="mainRedReportData" />
      </el-card>
      <el-card>
        <SingleReport :list="mainBlueReportData"/>
      </el-card>
    </div>
    <div class="flex-card">
      <el-card>
        <el-tabs
          v-model="activeName2"
          @tab-click="handleClick"
        >
          <el-tab-pane
            label="客户数据"
            name="first"
          >
            <div class="customer-data">
              <div class="customer-panel">
                <img src="../../assets/icon/icon_big_1.svg" />
                <span style="width: 150px">
                  <div>今日客户新增：<span class="numberStyle">{{financialData.clientAddNum}}</span>人</div>
                  <div>客户总数：<span class="numberStyle">{{financialData.clientCountNum}}</span>人</div>
                </span>
              </div>
              <div class="customer-panel">
                <img
                  src="../../assets/icon/icon_big_2.svg"
                  alt=""
                />
                <span style="width: 150px">
                  <div>今日新增车辆：<span class="numberStyle">{{financialData.clientCarAddNum}}</span>辆</div>
                  <div>车辆总数：<span class="numberStyle">{{financialData.clientCarCountNum}}</span>辆</div>
                </span>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane
            label="财务数据"
            name="second"
          >
            <div class="customer-data">
              <div class="customer-panel">
                <img src="../../assets/icon/financial_revenue.svg" />
                <span style="width: 150px">
                  <div>今日收入：￥<span class="numberStyle">{{financialData.income}}</span>元</div>
                  <div>总收入：￥<span class="numberStyle">{{financialData.countIncome}}</span>元</div>
                </span>
              </div>
              <div class="customer-panel">
                <img
                  src="../../assets/icon/financial_expenditure.svg"
                  alt=""
                />
                <span style="width: 150px">
                  <div>今日支出：￥<span class="numberStyle">{{financialData.expend}}</span>元</div>
                  <div>总支出：￥<span class="numberStyle">{{financialData.countExpend}}</span>元</div>
                </span>
              </div>
            </div>
          </el-tab-pane>
          <el-tab-pane
            label="库存数据"
            name="third"
          >
            <div class="customer-data">
              <div class="customer-panel">
                <img src="../../assets/icon/inventory_leave.svg" />
                <span style="width: 150px">
                  <div>今日出库：￥<span class="numberStyle">{{financialData.outNum}}</span></div>
                </span>
              </div>
              <div class="customer-panel">
                <img
                  src="../../assets/icon/inventory_arrive.svg"
                  alt=""
                />
                <span style="width: 150px">
                  <div>今日入库：<span class="numberStyle">{{financialData.inNum}}</span></div>
                </span>
              </div>
              <div class="customer-panel">
                <img
                  src="../../assets/icon/inventory_picking.svg"
                  alt=""
                />
                <span style="width: 150px">
                  <div>今日领料：<span class="numberStyle">{{financialData.pullNum}}</span></div>
                </span>
              </div>
            </div>
          </el-tab-pane>
        </el-tabs>
      </el-card>
       <el-card>
          <Advertisements />
       </el-card>
      <!-- <div class="advertisements">
        <Advertisements />
      </div> -->
    </div>
    <el-dialog
      v-if="visible"
      title="设置常用功能列表"
      :visible.sync="visible"
      width="1000px"
      :append-to-body="true"
      @close="dialogClose"
    >
      <AuthorityButton @close="dialogClose" />
    </el-dialog>
  </div>
</template>

<script>
import CommonFunctions from './components/commonFunctions'
import StatisticsToday from './components/statisticsToday'
import Advertisements from './components/advertisements'
// import Histogram from '@/components/Charts/Histogram';
import AuthorityButton from './components/authorityButton';//常用功能按钮设置
import { informPage, mainBlueReport, findAllReception, mainRedReport } from '@/api/after-sale/dashboard';
import { getStoreId } from '@/utils';
import ProductionValueTable from './components/productionValueTable';
import SingleReport from './components/singleReport';

export default {
  name: 'dashboard',
  components: {
    CommonFunctions,
    StatisticsToday,
    // Histogram,
    Advertisements,
    AuthorityButton,
    ProductionValueTable,
    SingleReport,
  },
  data () {
    return {
      activeName: 'first',
      activeName2: 'first',
      visible: false,
      agentCloum: [
        //代办类型 0-预约 1-工单 2-商机 3-库存
        //子类型 目前针对工单 0-快速单 1-综合单 2-接车单 3-洗车单
        { name: "我的代办", key: 'first', type: '' },
        { name: "预约通知", key: 'second', type: '0' },
        { name: "工单通知", key: 'third', type: '1' },
        { name: "商机通知", key: 'fourth', type: '2' },
        { name: "库存通知", key: 'fourth1', type: '3' },
      ],
      agentData: [],//代办数据
      financialData: {},//财务数据集合
      mainRedReportData:{},//红色报表数据
      mainBlueReportData:{},//蓝色报表数据
    }
  },
  computed: {
    agentDataList () {
      if (this.activeName == 'first') {
        return this.agentData;
      } else {
        let type = '';
        this.agentCloum.map(item => {
          if (item.key == this.activeName) {
            type = item.type
          }
        })
        console.log('当前类型', type)
        return this.agentData.filter(item => {
          if (item.informType == type) {
            return item
          }
        })
      }
    }
  },
  created () { },
  methods: {
    dialogClose () {
      this.visible = false;
    },
    handleClick () { },
    //代办查询
    getInform () {
      informPage({ storeId: getStoreId() }, 1000, 1).then(res => {
        let { success, data } = res;
        if (success) {
          this.agentData = data.content;
        }
      })
    },
    _mainBlueReport () {
      mainBlueReport().then(res => {
         let {success,data}=res;
        if(success){
          this.mainBlueReportData=data;
        }
        console.log('蓝色报表数据', res)
      })
    },
    _mainRedReport () {
      mainRedReport().then(res => {
        let {success,data}=res;
        if(success){
          this.mainRedReportData=data;
        }
        console.log('红色报表数据', res)
      })
    },
    _findAllReception () {
      findAllReception().then(res => {
        let { success, data } = res
        if (success) {
          this.financialData = data;
        }
        console.log('接待详情数据111', res)
      })
    }
  },
  created () {
    this.getInform();
    this._mainBlueReport();
    this._mainRedReport();
    this._findAllReception();
  }
}

</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.dashboard-container {
  padding: 5px;
  width: 100%;

  .flex-card {
    width: 100%;
    display: flex;
    height: 300px;

    img {
      flex: 1;
    }

    /deep/ .el-card {
      flex: 1;
      margin-bottom: 5px;
      margin-right: 5px;

      .el-card__body {
        padding: 0 18px;
      }

      .el-card__header {
        border-bottom-width: 0;
      }
    }
    .advertisements {
      width: 40%;
      // height: 230px;
      overflow: hidden;
    }
  }
}

.customer-data {
  // border: 1px solid red;
  height: 230px;
  display: flex;
  justify-content: space-around;
  // justify-self: self-start;
  align-items: center;

  .customer-panel {
    display: flex;
    align-items: center;
    img {
      // border: 1px solid red;
      height: 83px;
      width: 83px;
      padding-left: 20px;
      padding-right: 20px;
    }

    span {
      flex: 3;
      // border: 1px solid yellow;

      .numberStyle {
        font-weight: bold;
        font-family: PingFang SC;
        color: #333333;
        font-size: 24px;
        display: inline-block;
        padding: 10px 0;
      }
    }
  }
}
.usedButton {
  display: flex;
  justify-content: flex-start;
  div {
    flex: 1;
  }
  .settingButton {
    text-align: right;
    font-size: 20px;
    color: #00a1ec;
  }
}
.agenttabPaneClass {
  overflow: auto;
  height: 300px;
}
.agentClass {
  cursor: pointer;
  list-style: none;
  padding: 0;
  margin: 0;
  height: 100%;
  li {
    padding: 5px 0;
    border-bottom: 1px solid #dcdfe6;
  }
}
.agenttabPaneClass::-webkit-scrollbar {
  display: none;
}
</style>
